<link rel="import" href="../../../html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">

<dom-module id="network-health-container">
  <template>
    <style>
      .container {
        border: 1.5px solid rgb(175, 175, 175);
        border-radius: 10px;
        margin: 10px;
        padding: 5px;
      }

      .container-header {
        align-items: center;
        cursor: pointer;
        display: flex;
        min-height: 30px;
      }

      .container-name {
        flex: 1;
        font-size: 1rem;
      }
    </style>

    <div class="container">
      <div class="container-header" on-click="onClick_">
        <div class="container-name">[[label]]</div>
        <slot name="header"></slot>
        <iron-icon icon="[[getArrowIcon_(expanded)]]"></iron-icon>
      </div>
      <template is="dom-if" if="[[expanded]]">
        <slot></slot>
      </template>
    </div>

  </template>
  <script src="network_health_container.js"></script>
</dom-module>
